<!--某船某工序详情（呈现的表单可能不一致）-->
<template>
  <a-table
    :dataSource="state.source"
    :columns="state.columns"
    :pagination="state.pager"
    size="small"
    bordered
    :scroll="{ x: 1200 }"
    rowKey="id"
    @change="handleTableChange"
  >
    <template v-if="state.innerColumns" #expandedRowRender="{ record }">
      <a-table
        :columns="state.innerColumns"
        :data-source="record.inner"
        :pagination="false"
        rowKey="id"
        bordered
        size="small"
      >
      </a-table>
    </template>
  </a-table>
</template>
<script setup>
import {
  getCurrentInstance,
  reactive,
  ref,
  onMounted,
  onUnmounted,
  watch,
} from "vue";
import _ from "lodash";
import * as flow from "@/utils/shipflow/flow.js";
import * as ysflow from "@/utils/shipflow/ysflow.js";
import * as yyflow from "@/utils/shipflow/yyflow.js";
import { planList } from "@/utils/planList";

const { proxy } = getCurrentInstance();

const props = defineProps(["flow", "repair"]);

const state = reactive({
  source: [],
  columns: [],
  pager: {
    current: 1,
    pageSize: 10,
    total: 0,
    showSizeChanger: false,
    size: "normal",
  },
  innerColumns: null,
});

const apis = {
  normal: {
    0: "/workflow_ship_cut/list",
    1: "/workflow_ship_old/list",
    2: "/workflow_ship_weld/list",
    3: "/workflow_machine_pipe/list",
    4: "/workflow_towship_oil/list",
    "5-0": "/workflow_other_oil_ship/list",
    "5-1": "/workflow_other_oil_car/list",
    "6-0": "/workflow_paint_ship/list",
    "6-1": "/workflow_paint_house/list",
    "7-0": "/workflow_ship_sand/list",
    "7-1": "/workflow_house_sand/list",
    8: "/workflow_water_clean/list",
    9: "/workflow_electric_box/list",
  },
  special: {
    0: "/workflow_special/ship_cut/list",
    1: "/workflow_special/ship_old/list",
    2: "/workflow_special/ship_weld/list",
    3: "/workflow_special/machine_pipe/list",
    4: "/workflow_special/towship_oil/list",
    "5-0": "/workflow_special/other_oil_ship/list",
    "5-1": "/workflow_special/other_oil_car/list",
    "6-0": "/workflow_special/paint_ship/list",
    "6-1": "/workflow_special/paint_house/list",
    "7-0": "/workflow_special/ship_sand/list",
    "7-1": "/workflow_special/house_sand/list",
    8: "/workflow_special/water_clean/list",
    9: "/workflow_special/electric_box/list",
  },
};

let getList = () => {};

watch(
  () => [props.flow, props.repair],
  ([_flow, _repair]) => {
    // 根据不同船调用不同的工序表单
    if (!_.isNil(_flow) && _repair) {
      const { shipId, repairId } = _repair;
      let realFlow = flow;
      let url = apis.normal[_flow];
      if ([10000001, 10000002].includes(shipId)) {
        // 亚善或康帝
        realFlow = ysflow;
        url = apis.special[_flow];
      } else if ([10000003, 10000004].includes(shipId)) {
        // 宇右或凯粤
        realFlow = yyflow;
        url = apis.special[_flow];
      }

      const _columns = realFlow.workColumns[_flow];
      state.columns = _.map(_columns, (o) => ({
        ...o,
        ellipsis: true,
      }));
      state.innerColumns = realFlow.innerColumns[_flow];

      getList = (page) => {
        proxy.$axios
          .get(url, {
            params: {
              pageNumber: page,
              pageSize: state.pager.pageSize,
              repairId,
            },
          })
          .then(({ success, data }) => {
            if (success) {
              state.source = planList(data.content);
              state.pager.total = data.totalElements;
              state.pager.current = page;
            }
          });
      };

      getList(1);
    } else {
      state.columns = [];
      state.innerColumns = null;
      state.source = [];
      state.pager.current = 1;
      state.pager.total = 0;
    }
  },
  { immediate: true, deep: true }
);

const handleTableChange = ({ current }) => {
  getList(current);
};
</script>
<style lang="less" scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: large;
  padding: 8px 4px;

  a {
    font-size: 16px;
  }
}
</style>
